<template>
    <div class="renz_info">
		<div class="header">
			<van-nav-bar
				title="个人认证"
        left-arrow

        @click-left="onClickLeft"

				/>
		</div>
        <div class="renz_con">
          <p style="text-align: center;">{{en_name}}</p>


          <div v-for="(item,i) in items" :key="i">
              <van-field
                readonly
                clickable
                :label="item.kv_key_name"
                :value="item.temp_val"
                :placeholder="'请选择'+item.kv_key_name"
                @click="show(item)"
                v-if="item.kv_type==1?true:false"
              />
              <van-popup v-model="showPickel" position="bottom" >
                <van-picker
                  show-toolbar
                  :columns="item_conend | formatArr"
                  @cancel="showPickel = false"
                  @confirm="onConfirmz"
                />
              </van-popup>
            <p
              v-if="item.kv_type==2?true:false"><span>{{item.kv_key_name}}</span>
              <input type="text"
              	@click="valuecontent(item)"
              	v-model="inputdata[i]"
              	:placeholder="'请输入'+item.kv_key_name"></p>

          </div>



            <div class="clear"></div>
            <p style="color:red;font-size:0.8rem; width:100%">注：认证成功后不可修改</p>
            <div style="height:40px;"></div>
        </div>
        <div class="renz_foot" @click="submitcontent()">
            <van-button type="info">提交认证</van-button>
        </div>
	</div>
</template>
<script>
export default {
    data() {
        return {

        	subcontent:[],
        	item_conend:'',
        	item_pay:[],
            empty:[],
            inputdata:[],
            //房间号
            username:'',
            louname: '',
            showPickel: false,
            loucolumns: ['楼号1号', '楼号2号', '楼号3号', '楼号4号'],
            items:[],
            en_id:'',
            d_value:'',
            role:'',
            user:'',
            en_name:'',
            input_val:'',
            itemjson:''

        }
    },
    mounted:function(){
        this.en_id = this.$route.query.en_id;
        this.d_value = this.$route.query.d_value;
        this.role = this.$route.query.role;
        this.en_name = this.$route.query.en_name;
        let local_user = localStorage.getItem('user');
        if(local_user != undefined && local_user != "undefined"){
            let user = JSON.parse(local_user);
            this.user = user;
        }
        this.get_key_vals();
    },
    filters:{
        formatArr(val){

            var val_arr = val.split(",");

            return val_arr;
        },
    },
    watch:{
      	inputdata:function(value){
      		console.log(value);
      	}
    },

    methods:{
        onClickLeft(){
            this.$router.go(-1);
        },
        user_sub_key_vals(){
            const that = this;
            console.log(that.subcontent.length);
            console.log(that.items.length);
            if(that.subcontent.length != that.items.length){
                this.$toast("所有项必须填写");
                return false;
            }
            var jsonString = JSON.stringify(that.subcontent);
            console.log(jsonString);
            let p = "enId="+that.en_id+"&userId="+that.user.userId+"&kvJsonStr="+jsonString+"&role="+that.role;
            that.$sendRequest('/v2/user_sub_key_vals',p).then(function(res){

                that.$router.push({
                    path:'/myself'
                })
            })
        },
    	valuecontent(e){
    		console.log(e);
        const that = this;
    		console.log(that.subcontent)
    	},
    	submitcontent(){
    		var that = this;
    		for(var i = 0;i<that.inputdata.length;i++){
            console.log(i);
    		    console.log(that.inputdata[i]);
            if(that.inputdata[i] == undefined || that.inputdata[i] == 'undefined'){
                continue;
            }
            var obj_content = {
                kv_id:that.items[i].kv_id,
                kv_key_name:that.items[i].kv_key_name,
                kv_key_val:that.inputdata[i],
            }
            console.log(that.subcontent.length);
            for(var j = 0;j<that.subcontent.length;j++){
                if(that.subcontent[j].kv_id == obj_content.kv_id){
                    that.subcontent.splice(j,1);
                    break;
                }
            }
            that.subcontent.push(obj_content);
        }

        this.user_sub_key_vals();

    	},
        get_key_vals(){
            const that = this;
            that.$sendRequest('/v2/get_key_vals',"enId="+that.en_id+"&role="+that.role).then(function(res){
                console.log(res.data);
                for(var i = 0;i<res.data.result.kvs.length;i++){
                    res.data.result.kvs[i].temp_val='';
                    that.items.push(res.data.result.kvs[i]);
                }

                // console.log(that.items);
//              that.inputdata.push(that.items)
//              console.log(that.inputdata[0][0].kv_key_name);



            })
        },
        show(item){
        	console.log("item:"+item);

        	var that = this;
        	that.showPickel = true;
        	that.itemjson = item;
        	that.item_conend = item.kv_key_val;


        },
        onConfirmz(value,index) {
            var that = this;
          console.log(value);

            var obj_content = {
                kv_id:that.itemjson.kv_id,
                kv_key_name:that.itemjson.kv_key_name,
                kv_key_val:value,
            }
            //

            for(var i = 0;i<that.items.length;i++){
              if(that.items[i].kv_id == that.itemjson.kv_id){
                  that.items[i].temp_val = value;
                  break;
              }
            }




            for(var i = 0;i<that.subcontent.length;i++){
                if(that.subcontent[i].kv_id == obj_content.kv_id){
                    that.subcontent.splice(i,1);
                    break;
                }
            }
            that.subcontent.push(obj_content);
            console.log(that.subcontent);
            that.showPickel = false;
         },
    }
}
</script>
<style scoped="scoped">
  .renz_info>>> .van-overlay{
    z-index: 0 !important;
  }
    .clear{
        clear: both;
    }
    .renz_info{
        height: 100vh;
        background-color: #fff;
    }
	.header>>>.van-cell__title{
		  width: 63px !important;
	}
	.header >>> .van-icon{
        color: #000000;
    }
    .header >>> .van-nav-bar__title{
        color: #2c3e50;
    }
    .renz_con{
        width: 100vw;
        box-sizing: border-box;
        padding:2vh 9vw;
        background-color: #fff;
    }
    .renz_con p{
        text-align: left;
        height:44px;
        font-size: 0.9rem;
        padding: 1vh 0;
        margin: 0;
    }
    .renz_con p span{
        line-height: 7vh;
    }
    .renz_con p input{
        float: right;
        width: 56vw;
        padding: 0 2vw;
        border-radius: 4px;
        border: 0.032rem solid #ccc;
        height: 43px;
    }
    .renz_con >>> .van-field__control{
        /* float: right; */
        width: 60vw;
        /* float: right; */
        padding: 0 2vw;
        border-radius: 4px;
        border: 0.032rem solid #ccc;
        height: 43px;
    }
    .renz_con >>> .van-field{
        padding: 1vh 0;
        font-size: 0.9rem;
        /* border-bottom: 1px solid #fff !important; */
    }
    .van-cell:not(:last-child)::after{
        border: none;
    }
    .renz_con >>> .van-field__label{
        width: 21.7vw;
        text-align: left;
        margin-top: 1.8vh;
    }
    .renz_foot{
        width: 100%;
        position:fixed;
        bottom: 0;
    }
    .renz_foot >>>.van-button{
        width: 100%;
    }
</style>

